<template>
  <div id="shoppCart-info">
    <ul>
      <li v-for="(v, i) in getCartData" :key="i">
        <div class="shoppCart-list-l">
          <input type="checkbox" />
          <img :src="v.product_img_url" />
        </div>
        <div class="shoppCart-list-r">
          <p>{{ v.product_name }}</p>
          <span>{{ v.product_uprice | roundFilter }}</span>
          <label>
            <button @click="del(v)">-</button>
            {{ v.count }}
            <button @click="add(v)">+</button>
          </label>
        </div>
      </li>
    </ul>
    <div class="shoppCar-total">
      <input type="checkbox" />全选
      <label>
        <span>合计:{{ totalCount }}件 </span>
        <b>{{ totalAmount | roundFilter }} </b>
        <i>结算</i>
      </label>
    </div>
    <div class="bottom"></div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: "Detail",
  data() {
    return {
      lists: [],
    };
  },
  methods: {
    getData() {
      getDetail(data).then((res) => {
        console.log(res);
        this.lists = res.data;
      });
    },
    add(v) {
      // this.$store.dispatch("CARTCHANGEADD");  //actions 最多传两个参数,多的可以当对象传入进去
      this.$store.dispatch("CARTCHANGE", { type: "add", ...v });
    },
    del(v) {
      this.$store.dispatch("CARTCHANGE", { type: "del", ...v });
    },
  },
  computed: mapGetters(["getCartData", "totalAmount", "totalCount"]),
  filters: {
    roundFilter(d, n) {
      return "￥" + d.toFixed(n);
    },
  },
};
</script>

<style>
</style>